<template>
  <div class="dashboard-container">
    <div class="adminContent">
      <div class="title">考勤管理</div>
      <div class="butList">
        <div style="display: inline-block" @click="addHander('add')"><span>+</span> 新增考勤组</div>
      </div>
      <div class="cont">
        <div class="tableCont">
          <el-table ref="multipleTable" :data="tableData" style="width: 100%">
            <el-table-column align="center" label="名称" width="120">
              <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column align="center" label="人数" prop="memberNum" width="120" />
            <el-table-column align="center" prop="name" label="考勤时间">
              <template slot-scope="scope">
                <p>每周 {{ workdays(scope.row.workdays, 0) }} 休息</p>
                <p>每周：{{ workdays(scope.row.workdays, 1) }} {{ scope.row.startWorkTime }} - {{ scope.row.offWorkTime }} </p>
              </template>
            </el-table-column>
            <el-table-column width="120" prop="address" center label="操作" show-overflow-tooltip>
              <template slot-scope="scope">
                <span class="actLab" @click="editerHander(scope.row)">编辑</span>
                <span class="actLab" @click="delHander(scope.row)">删除</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="pageList">
            <el-pagination v-if="total>pageSize" layout="prev, pager, next" :total="total" @current-change="handlePageChange" />
          </div>
        </div>
      </div>
      <el-dialog :title="title" :visible.sync="dialogVisible" width="80%" center @close="closeHandle">
        <div class="editCont">
          <el-form ref="ruleForm" :model="ruleForm" label-width="140px" class="demo-ruleForm">
            <el-form-item label="考勤组名称" prop="name" size="mini" style="width: 315px;">
              <el-input v-model="ruleForm.name" placeholder="请输入考勤组名称" />
            </el-form-item>
            <el-form-item label="参与考勤人员" prop="region">
              <Cascader sel-style="min-width:175px" :dialog-visible="dialogVisible" :check-list-dataes="ruleForm.participates" @getValue="getValue" />
            </el-form-item>
            <el-form-item label="无需考勤人员" prop="region">
              <Cascader sel-style="min-width:175px" :dialog-visible="dialogVisible" :check-list-dataes="ruleForm.notParticipates" @getValue="getValueUn" />
            </el-form-item>
<!--            <el-form-item label="考勤组负责人" prop="region">-->
<!--              <el-select v-model="ruleForm.managerId" size="mini" placeholder="请选择考勤组负责人">-->
<!--                <el-option v-for="item in memberList" :key="item.id" :label="item.username" :value="item.id" />-->
<!--              </el-select>-->

<!--            </el-form-item>-->
            <el-form-item label="设置上下班时间" size="mini" style="width: 840px;">
              <div style="height: 40px;">
                <el-col :span="5">
                  <el-time-picker v-model="ruleForm.startWorkTime" placeholder="选择时间" arrow-control value-format="HH:mm:ss" size="mini" style="width: 100%;" />
                </el-col>
                <el-col class="line" style="text-align: center" :span="0.5">-</el-col>
                <el-col :span="5">
                  <el-time-picker v-model="ruleForm.offWorkTime" placeholder="选择时间" arrow-control value-format="HH:mm:ss" size="mini" style="width: 100%;" />
                </el-col>
                <el-col :span="3" style="text-align:center">休息时间:</el-col>
                <el-col :span="5">
                  <el-time-picker v-model="ruleForm.startNoonRestTime" placeholder="选择时间" arrow-control value-format="HH:mm:ss" size="mini" style="width: 100%;" />
                </el-col>
                <el-col class="line" style="text-align: center" :span="0.5">-</el-col>
                <el-col :span="5">
                  <el-time-picker v-model="ruleForm.endNoonRestTime" placeholder="选择时间" arrow-control value-format="HH:mm:ss" size="mini" style="width: 100%;" />
                </el-col>
              </div>
              <div style="margin-top: 5px;">
                <el-checkbox v-model="startWorkTime" label="允许迟到分钟数" name="type" @change="setWorkState()" />
                <span v-if="startWorkTime"><input v-model="ruleForm.allowLateMinutes" type="number" placeholder="请输入" class="miniInput"> 分</span>
              </div>
              <div style="margin-top: 5px;">
                <el-checkbox v-model="offWorkTime" label="旷工迟到分钟数" name="type" @change="setWorkState()" />
                <span v-if="offWorkTime"><input v-model="ruleForm.completionLimitMinutes" type="number" placeholder="请输入" class="miniInput"> 分</span>
              </div>
            </el-form-item>
            <el-form-item label="工作日设置" prop="type">
              <el-checkbox-group v-model="ruleForm.workdays">
                <el-checkbox label="1" name="1">周一</el-checkbox>
                <el-checkbox label="2">周二</el-checkbox>
                <el-checkbox label="3">周三</el-checkbox>
                <el-checkbox label="4">周四</el-checkbox>
                <el-checkbox label="5">周五</el-checkbox>
                <el-checkbox label="6">周六</el-checkbox>
                <el-checkbox label="7">周日</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="特殊日期" prop="type">
              <div><span class="addLab" @click="workTimeSet('add', 'must')">点击添加</span> 必须打卡的日期</div>
              <div v-show="mustCardsDateSt">
                <el-date-picker v-model="mustCardsDate" type="date" value-format="timestamp" size="mini" placeholder="选择日期" />
                <span class="addLab" @click="addWorkDate('must')">{{ active }}</span>
              </div>
              <div v-if="mustCardsDateItem.length > 0" class="table">
                <div class="tbHead">
                  <div>必须打卡日期</div>
                  <div>操作</div>
                </div>
                <div v-for="item in mustCardsDateItem" :key="item.id" class="tbTr">
                  <div>{{ moment(Number(item)).format('YYYY-MM-DD') }}</div>
                  <div> <span class="act" @click="workTimeSet('edit', 'must', item)">编辑</span> <span class="act" @click="workTimeSet('del', 'must',item)">删除</span> </div>
                </div>
              </div>
              <div> <span class="addLab" @click="workTimeSet('add', 'non')">点击添加</span> 不用打卡的日期</div>
              <div v-show="nonCardsDateSt">
                <el-date-picker v-model="nonCardsDate" type="date" value-format="timestamp" size="mini" placeholder="选择日期" />
                <span class="addLab" @click="addWorkDate('non')">{{ active }}</span>
              </div>
              <div v-if="nonCardsDateItem.length > 0" class="table">
                <div class="tbHead">
                  <div>不用打卡日期</div>
                  <div>操作</div>
                </div>
                <div v-for="item in nonCardsDateItem" :key="item.id" class="tbTr">
                  <div>{{ moment(Number(item)).format('YYYY-MM-DD') }}</div>
                  <div> <span class="act" @click="workTimeSet('edit', 'non', item)">编辑</span> <span class="act" @click="workTimeSet('del', 'non', item)">删除</span> </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="考勤方式" prop="type">
              <div><span class="address" @click="mapOpenHander">添加考勤地点</span> 有效范围 <input v-model="ruleForm.range" class="miniInput" type="text" size="mini"></input> 米</div>
            </el-form-item>
            <div v-if="mapOpen" class="map">
              <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" />
              <el-amap vid="amapDemo" :center="mapCenter" :plugin="plugin" :zoom="12" class="amap">
                <div v-if="markers.length>0">
                  <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :title="marker.name">
                    <span class="markerLab" @click="addMarker(marker)"><i class="icon">&#xe66b;</i></span>
                  </el-amap-marker>
                </div>
              </el-amap>
              <div class="mapFoot">
                <div>
                  <div style="margin-bottom: 15px;">地址名称：<input v-model="mapName" type="text" placeholder="请输入"></div>
                  <div>详细地址：{{ mapAddress }}</div>
                </div>
                <div class="botItem">
                  <span class="cancelSub" @click="() => mapOpen = false">取消</span>
                  <span class="confirmSub" @click="mapInfoHander() ">确定</span>
                </div>
              </div>
            </div>
            <div v-if="mapAdderssItems.length > 0" class="addressItems">
              <div class="addTit"><span class="icon">&#xe667;</span> 考勤地点</div>
              <div v-for="(item, index) in mapAdderssItems" :key="index" class="addItems">
                <div>
                  <p><i class="icon">&#xe667;</i>{{ item.addressName }}</p>
                  <p class="addDes">{{ item.address }}</p>
                </div>
                <div class="del" @click="delMapInfoHander"><span>删除</span></div>
              </div>
            </div>
            <div class="dialog-footer">
              <el-button type="primary" size="mini" style="background: #3345ff;border:none;" @click="submitSetAdmin('ruleForm')">保存</el-button>
            </div>
          </el-form>
        </div>
      </el-dialog>
      <!--      // 删除-->
      <el-dialog title="确认删除" :visible.sync="qurenDel" width="30%" center>
        <div style="text-align: center">
          <p><i class="icon" style="color:#f48181;font-size: 40px;margin: 10px;">&#xe685;</i></p>
          <p>确认后该信息将被删除，</p>
          <p>并不可恢复，是否确认删除？</p>
        </div>
        <div class="submitBox">
          <el-button size="mini" style="color:#3345ff;" @click="qurenDel = false">取 消</el-button>
          <el-button size="mini" class="submit" type="primary" @click="confirmDel">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from "vuex";
  import Cascader from "./../../components/Cascader";

  export default {
    name: "Dashboard",
    data() {
      return {
        qurenDel: false,
        delId: "",
        dialogVisible: false,
        loading: false,
        title: "添加考勤组",
        tableData: [],
        active: "添加",
        total: 0,
        page: 1,
        pageSize: 8,
        mustCardsDate: "",
        mustCardsDateSt: false,
        mustCardsDateItem: [],
        nonCardsDate: "",
        nonCardsDateSt: false,
        nonCardsDateItem: [],
        value: "",
        options: [],
        adminListData: [],
        memberList: [],
        checkList: [],
        checkListes: [],
        cardsDate: "",
        noCardsDate: "",
        startWorkTime: "",
        offWorkTime: "",
        chgCardsDateNum: "",
        formDataInit: {
          name: "",
          participates: [],
          notParticipates: [],
          managerId: "",
          managerType: "1",
          startWorkTime: "",
          offWorkTime: "",
          startNoonRestTime: "",
          endNoonRestTime: "",
          allowLateMinutes: "",
          completionLimitMinutes: "",
          workdays: [],
          extraConfig: [],
          lat: "",
          lng: "",
          range: 300,
          addressName: "",
          address: "",
          id: "",
        },
        ruleForm: {},
        zoom: 10,
        markers: [],
        searchOption: {
          city: "北京",
          citylimit: false,
        },
        mapCenter: [116.39, 39.9],
        plugin: [
          {
            pName: "ToolBar",
          },
        ],
        poit: [],
        mapOpen: false,
        mapName: "",
        mapAddress: "",
        mapAdderssItems: [],
      };
    },
    computed: {
      ...mapGetters(["name"]),
    },
    components: {
      Cascader,
    },
    created() {
      this.init();
      this.getMemberList();
      this.ruleForm = JSON.parse(JSON.stringify(this.formDataInit));
    },
    methods: {
      init() {
        this.$store
          .dispatch("attendance/getAattendGroupLilsAct", {
            page: this.page,
            pageSize: this.pageSize,
          })
          .then((res) => {
            this.tableData = res.rows;
            this.total = Number(res.total);
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      },
      getAdminList() {
        this.$store
          .dispatch("company/getCompanyAdminListAct")
          .then((res) => {
            this.adminListData = res;
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      },
      getMemberList() {
        this.$store
          .dispatch("organization/getSimMemberAct", {
            pageSize: 1000,
            includeSub: 0,
          })
          .then((res) => {
            this.memberList = res.rows;
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      },
      getValue(val) {
        this.ruleForm.participates = val.map((n) => {
          return {
            objectId: n.id,
            objectName: n.name,
            objectType: n.type,
          };
        });
      },
      getValueUn(val) {
        this.ruleForm.notParticipates = val.map((n) => {
          return {
            objectId: n.id,
            objectName: n.name,
            objectType: n.type,
          };
        });
      },
      closeHandle() {
        this.ruleForm = JSON.parse(JSON.stringify(this.formDataInit));
      },
      // 特殊日期处理
      workTimeSet(st, tg, dat) {
        if (tg == "must") {
          this.nonCardsDateSt = false;
          if (st == "add") {
            this.mustCardsDateSt = true;
            this.active = "添加";
            this.mustCardsDate = "";
          } else if (st == "edit") {
            this.mustCardsDateSt = true;
            this.active = "修改";
            this.mustCardsDate = dat;
            this.chgCardsDateNum = this.mustCardsDateItem.indexOf(dat);
          } else if (st == "del") {
            const num = this.mustCardsDateItem.indexOf(dat);
            this.mustCardsDateItem.splice(num, 1);
          }
        } else if (tg == "non") {
          this.mustCardsDateSt = false;
          if (st == "add") {
            this.nonCardsDateSt = true;
            this.active = "添加";
            this.nonCardsDate = "";
          } else if (st == "edit") {
            this.nonCardsDateSt = true;
            this.active = "修改";
            this.nonCardsDate = dat;
            this.chgCardsDateNum = this.nonCardsDateItem.indexOf(dat);
          } else if (st == "del") {
            const num = this.nonCardsDateItem.indexOf(dat);
            this.nonCardsDateItem.splice(num, 1);
          }
        }
      },
      // 添加特殊日期
      addWorkDate(st) {
        if (st == "must") {
          if (!this.mustCardsDate) {
            this.$message.error("请先选择日期！");
            return false;
          }
          if (
            this.mustCardsDateItem.indexOf(this.mustCardsDate) != -1 ||
            this.nonCardsDateItem.indexOf(this.mustCardsDate) != -1
          ) {
            this.$message.error("该日期已被选中,请重新调整！");
            return;
          }
          if (this.active == "修改") {
            this.mustCardsDateItem.splice(
              this.chgCardsDateNum,
              1,
              this.mustCardsDate
            );
            this.mustCardsDateSt = false;
          } else {
            this.mustCardsDateItem.push(this.mustCardsDate);
            this.mustCardsDateSt = false;
          }
        } else {
          if (!this.nonCardsDate) {
            this.$message.error("请先选择日期！");
            return false;
          }
          if (
            this.mustCardsDateItem.indexOf(this.nonCardsDate) != -1 ||
            this.nonCardsDateItem.indexOf(this.nonCardsDate) != -1
          ) {
            this.$message.error("该日期已被选中,请重新调整！");
            return;
          }
          if (this.active == "修改") {
            this.nonCardsDateItem.splice(
              this.chgCardsDateNum,
              1,
              this.nonCardsDate
            );
            this.nonCardsDateSt = false;
          } else {
            this.nonCardsDateItem.push(this.nonCardsDate);
            this.nonCardsDateSt = false;
          }
        }
      },
      addHander() {
        this.title = "添加考勤组";
        this.ruleForm = JSON.parse(JSON.stringify(this.formDataInit));
        this.dialogVisible = true;
      },
      // 编辑考勤组
      editerHander(row) {
        this.$store
          .dispatch("attendance/getAttendGroupInfoAct", {
            id: row.id,
          })
          .then((res) => {
            if (!res.success) {
              this.$message.error("信息获取失败，请稍后重试");
              return;
            }
            this.ruleForm = res.data;
            this.startWorkTime = res.data.allowLateMinutes ? true : false;
            this.offWorkTime = res.data.completionLimitMinutes ? true : false;
            let workArr = [];
            res.data.workdays.forEach((n, i) => {
              if (n == 1) {
                workArr.push(String(i + 1));
              }
            });
            this.ruleForm.workdays = workArr;
            res.data.extraConfig.forEach((n) => {
              if (n.requiredAttend == 1) {
                this.mustCardsDateItem = [];
                this.mustCardsDateItem.push(n.setDate);
              } else if (n.requiredAttend == 0) {
                this.nonCardsDateItem = [];
                this.nonCardsDateItem.push(n.setDate);
              }
            });
            if (res.data.address) {
              this.mapAdderssItems = [
                {
                  address: res.data.address,
                  addressName: res.data.addressName,
                },
              ];
            }
            this.title = "编辑考勤组";
            this.dialogVisible = true;
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      },
      // 删除
      delHander(row) {
        this.delId = row.id;
        this.qurenDel = true;
      },
      confirmDel() {
        this.$store
          .dispatch("attendance/delAttendGroupInfoAct", {
            id: this.delId,
          })
          .then((res) => {
            this.qurenDel = false;
            this.$message.success("删除成功！");
            this.init();
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      },
      // 更改上下班迟到时间
      setWorkState() {
        this.startWorkTime ? null : (this.ruleForm.allowLateMinutes = 0);
        this.offWorkTime ? null : (this.ruleForm.completionLimitMinutes = 0);
      },
      // 分页
      handlePageChange(val) {
        this.page = val;
        this.init();
      },
      //特殊日期处理
      cgData() {
        let dateArray = [];
        const mustDate = this.mustCardsDateItem;
        const nonDate = this.nonCardsDateItem;
        if (mustDate && mustDate.length > 0) {
          mustDate.forEach((n) => {
            dateArray.push({
              setData: this.moment(n).format("YYYY-MM-DD"),
              requiredAttend: 1,
            });
          });
        }
        if (nonDate && nonDate.length > 0) {
          nonDate.forEach((n) => {
            dateArray.push({
              setData: this.moment(n).format("YYYY-MM-DD"),
              requiredAttend: 0,
            });
          });
        }
        return dateArray;
      },
      // 提交
      submitSetAdmin() {
        let params = {
          ...this.ruleForm,
        };
        params.extraConfig = this.cgData();
        params.workdays = this.workDaysComplate(params.workdays);
        params.extraConfig = this.extraConfigComplate();
        if (!params.name) {
          this.$message.error("请输入考勤组名称！");
          return false;
        }
        // if (!params.managerId) {
        //   this.$message.error("请选择考勤组负责人！");
        //   return false;
        // }
        if (!params.startWorkTime || !params.offWorkTime) {
          this.$message.error("请设置上下班时间！");
          return false;
        }
        if (!params.startNoonRestTime || !params.endNoonRestTime) {
          this.$message.error("请设置休息时间！");
          return false;
        }
        if (!params.range) {
          this.$message.error("请添写考勤范围！");
          return false;
        }
        if (!params.address) {
          this.$message.error("请添加考勤地点！");
          return false;
        }
        const url =
          this.title == "添加考勤组"
            ? "attendance/addAttendGroupAct"
            : "attendance/putAttendGroupInfoAct";

        // 格式化时间
        // moment(Number(item)).format('YYYY-MM-DD')
        if(params.extraConfig !== undefined) {
          params.extraConfig = params.extraConfig.map(item => {
            return {
              setDate: this.moment(Number(item.setDate)).format('YYYY-MM-DD'),
              requiredAttend: item.requiredAttend
            }
          })
        }

        this.$store
          .dispatch(url, {
            ...params,
          })
          .then((res) => {
            this.$message.success("数据提交成功！");
            this.init();
            this.dialogVisible = false;
            this.adminListData = res;
            this.loading = false;
          })
          .catch(() => {
            this.$message.error("提交失败!");
            // this.loading = false;
          });
      },
      addMarker(obj) {
        this.mapName = obj.name;
        this.mapAddress = obj.address;
        this.poit = obj.position;
      },
      // 打开考勤地图
      mapOpenHander() {
        if (this.mapAdderssItems.length == 0) {
          this.mapOpen = true;
          this.mapName = "";
          this.markers = [];
          this.mapAddress = "请选择地点";
        } else {
          this.$message.error("已存在考勤地点，请删除后再添加");
        }
      },
      // 地图搜索
      onSearchResult(pois) {
        let latSum = 0;
        let lngSum = 0;
        if (pois && pois.length > 0) {
          pois.forEach((poi) => {
            let { lng, lat } = poi;
            lngSum += lng;
            latSum += lat;
            this.markers.push({
              position: [poi.lng, poi.lat],
              name: poi.name,
              address: poi.address,
            });
          });
          let center = {
            lng: lngSum / pois.length,
            lat: latSum / pois.length,
          };
          this.mapCenter = [center.lng, center.lat];
        } else {
          this.markers = [];
        }
      },
      // 地理位置确定
      mapInfoHander() {
        if (!this.mapName) {
          this.$message.error("请输入名称！");
          return false;
        }
        if (this.mapAddress == "请选择地点") {
          this.$message.error("请先搜索并选择地点！");
          return false;
        }
        this.mapAdderssItems.push({
          addressName: this.mapName,
          address: this.mapAddress,
        });
        this.ruleForm.addressName = this.mapName;
        this.ruleForm.address = this.mapAddress;
        this.ruleForm.lat = this.poit[0];
        this.ruleForm.lng = this.poit[1];
        this.mapOpen = false;
        this.addressName = "";
        this.address = "";
        this.markers = [];
        console.log(this.ruleForm);
      },
      // 地理位置删除
      delMapInfoHander() {
        this.mapAdderssItems = [];
      },
      // 数据处理函数
      // 工作日数据处理
      workdays(val, st) {
        let lat = [];
        if (typeof val == "string") {
          val = val.split(",");
        }
        if (val && val.length > 0) {
          val.forEach((n, i) => {
            if (n == st) {
              switch (i) {
                case 0:
                  lat.push("一");
                  break;
                case 1:
                  lat.push("二");
                  break;
                case 2:
                  lat.push("三");
                  break;
                case 3:
                  lat.push("四");
                  break;
                case 4:
                  lat.push("五");
                  break;
                case 5:
                  lat.push("六");
                  break;
                case 6:
                  lat.push("日");
                  break;
              }
            }
          });
        }

        return lat.join("、");
      },
      // workDays 数据处理
      workDaysComplate(obj) {
        let workArr = [];
        for (let i = 1; i <= 7; i++) {
          if (obj.indexOf(String(i)) != -1) {
            workArr.push(1);
          } else {
            workArr.push(0);
          }
        }
        return workArr;
      },
      // 特殊日期数据处理
      extraConfigComplate() {
        let arr = [];
        this.mustCardsDateItem.forEach((n) => {
          let dat = {
            setDate: n,
            requiredAttend: 1,
          };
          arr.push(dat);
        });
        this.nonCardsDateItem.forEach((n) => {
          let dat = {
            setDate: n,
            requiredAttend: 0,
          };
          arr.push(dat);
        });
        return arr;
      },
    },
  };
</script>

<style lang="scss">
  .adminContent {
    .el-table thead th,
    .el-table thead tr {
      background: #edeffd;
    }

    .pageList {
      text-align: right;
      padding: 10px 0;

      .el-pager li {
        margin: 0 5px;
        min-width: 28px;
        width: 28px;
      }

      .active {
        background: #3345ff;
        border-radius: 100%;
        color: #fff;
      }
    }

    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background: #3345ff;
      border-color: #3345ff;
    }

    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #606266;
    }

    .search-tips {
      min-width: 200px;
      box-shadow: 0 0 4px #ccc;
      border: none !important;
      margin-top: 4px;

      li {
        border: none;
      }
    }
  }
</style>
<style lang="scss" scoped>
  .dashboard {
    &-container {
      .adminContent {
        .title {
          text-align: center;
          padding: 0 15px;
          line-height: 40px;
          background: #eceffc;
        }

        .butList {
          padding: 0 20px;
          cursor: pointer;
          color: #3345ff;
          font-size: 14px;
          line-height: 50px;

          span {
            display: inline-block;
            position: relative;
            top: -1px;
            text-align: center;
            font-weight: bold;
            margin-right: 2px;
            color: #fff;
            background: #3345ff;
            line-height: 12px;
            height: 14px;
            width: 14px;
            border-radius: 100%;
          }
        }

        .cont {
          padding: 0 20px;

          .tableCont {
            background: #fff;

            p {
              margin: 0px;
            }
          }

          .titlab {
            margin: 0 4px;
            font-size: 12px;
            border-radius: 4px;
            padding: 4px 10px;
          }

          .actLab {
            color: #3345ff;
            margin: 0 4px;
            cursor: pointer;
          }
        }

        .itemsLIst {
          display: flex;
          flex-wrap: wrap;
          line-height: 40px;

          .items {
            width: calc(50% - 5px);
            display: flex;
            justify-content: space-between;
            box-shadow: 2px 2px 10px #e6e6e6;
            margin: 5px 0;
            border-radius: 5px;
            padding: 10px 15px;

            .lab {
              display: inline-block;
              text-align: center;
              width: 40px;
              height: 40px;
              color: #fff;
              border-radius: 100px;
              font-size: 22px;
              margin-right: 10px;
            }
          }

          .items:nth-child(2n-1) {
            margin-right: 10px;
          }
        }

        .tit {
          line-height: 50px;
        }

        .dialog-footer {
          display: flex;
          justify-content: center;
          text-align: center;
          margin-top: 30px;
        }

        .miniInput {
          width: 58px;
          line-height: 17px;
          border-radius: 3px;
          font-size: 12px;
          border: solid 1px #ccc;
          padding: 3px 4px;
        }

        .addLab {
          background: #3345ff;
          color: #fff;
          padding: 4px 10px;
          border-radius: 3px;
          font-size: 12px;
          cursor: pointer;
        }

        .table {
          width: 400px;
          border-radius: 3px;
          box-shadow: 0px 0px 4px #ccc;

          .tbHead {
            background: #eceffc;
            display: flex;
            text-align: center;

            div {
              flex: 1;
            }
          }

          .tbTr {
            display: flex;
            text-align: center;

            div {
              flex: 1;
            }

            .act {
              cursor: pointer;
              color: #3345ff;
            }
          }
        }

        .address {
          color: #3345ff;
          cursor: pointer;
          margin-right: 10px;
        }

        .map {
          background: #fff;
          box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
          margin-bottom: 20px;
          position: relative;

          .amap {
            height: 300px;
            border-radius: 3px;
          }

          .search-box {
            position: absolute;
            top: 25px;
            right: 20px;
            width: 200px;
            height: 35px;
            border-radius: 3px;
            box-shadow: 0 0 4px #ccc;
          }

          .markerLab {
            display: inline-block;
            text-align: center;

            .icon {
              color: #ff0000;
              font-size: 32px;
              text-shadow: 0 0 4px #ccc;
            }
          }

          .amap-page-container {
            position: relative;
          }

          .mapFoot {
            padding: 15px;
            display: flex;
            justify-content: space-between;

            input {
              border-radius: 3px;
              border: solid 1px #e8e9ea;
              padding: 2px 5px;
            }

            .botItem {
              display: flex;
              align-items: center;
            }

            .cancelSub,
            .confirmSub {
              border: solid 1px #3345ff;
              color: #3345ff;
              border-radius: 3px;
              cursor: pointer;
              margin: 10px;
              padding: 4px 10px;
            }

            .confirmSub {
              color: #fff;
              background: #3345ff;
            }
          }
        }

        .submitBox {
          display: flex;
          justify-content: center;
          margin-top: 20px;

          .submit {
            background: #3345ff;
            border-color: #3345ff;
          }
        }

        .addressItems {
          box-shadow: 0px 0px 4px #ccc;
          border-radius: 3px;
          line-height: 25px;
          width: 400px;
          margin-left: 142px;

          .icon {
            color: #f00;
          }

          .addTit {
            border-bottom: solid 1px #ccc;
            padding: 10px 15px;
          }

          .addItems {
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;

            p {
              margin: 0;
              padding: 0;

              .icon {
                font-size: 14px;
              }
            }

            .del {
              text-align: right;
              display: flex;
              align-items: center;
              color: #3345ff;
            }
          }

          .addDes {
            color: #999;
          }
        }
      }
    }
  }
</style>
